<template>
	<scroll-view class="page b-bg haveBar" id="scrollWrap" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="50" @scroll="scroll">
		<view class="test"></view>
		<view class="userBox">
			<view class="logoBox" @tap='goIndex'>
				<image src="../../static/img/logo.png" mode="" class="logo"></image>
			</view>
			<user></user>
		</view>
		<banner :banner_image="banner_image"></banner>
		<view class="blockTab" :class="{fix:scorllUi.cri}">
			<tab current="2" scrollLeft='0' :goId='goId'></tab>
		</view>
		<view class="blockIn" v-show="scorllUi.cri"></view>
		<view class="block work-works">
			<view class="work-works-inner">
				<fil :active_id="goId" @render="render"></fil>
				<!-- <view class="items">
					<view class="item" v-for="(item,index) in list" :key="index" @tap="goDetail(item.id)">
						<view class="colloct">
							<view style="margin-right: 5px;" v-show="item.collect_total > 0">{{item.collect_total}}</view>
							<text class="iconfont icon-aixin" v-if="item.is_collect" @tap.stop="uncollect(item)"></text>
							<text class="iconfont icon-a-aixin1" v-if="!item.is_collect" @tap.stop="collect(item)"></text>
						</view>
						<view class="imgBox" :style="{ backgroundImage: `url(${$ft.getCover(item.file_list)})`}"></view>
						<view class="in-title">
							{{item.title}}
						</view>
						<view class="in-f-title">
							{{item.username}}
						</view>
						<view class="in-f-title">
							{{item.school}}
						</view>
						<view class="tpBtn" @tap.stop="envetTp(item)" v-if="is_vote_btn === 1">
							<text v-show="item.is_vote">已投票 </text>
							<text v-show="!item.is_vote">投票 </text>
							 {{item.total_vote}}
						</view>
						<view class="tpBtn disable" v-if="is_vote_btn === 0">
							 投票未开始	
						</view>
						<view class="tpBtn disable" v-if="is_vote_btn === 2">
							投票已结束
						</view>
					</view>
					<view class="more-bottom">
						<text v-show="!page.is_bottom">加载中...</text>
						<text v-show="page.is_bottom">没有更多了></text>
					</view>
				</view> -->
				<image src="../../static/img/none.png" mode="" class="noneImg"></image>
			</view>
		</view>
		<barCon :is_up="is_up" ref='barCon'></barCon>
	</scroll-view>
	
</template>

<script>
   document.addEventListener('UniAppJSBridgeReady', function() {
	 uni.postMessage({
		 data: {
			 action: 'message'
		 }
	 });
	 uni.getEnv(function(res) {
		 console.log('当前环境：' + JSON.stringify(res));
	 });


	 document.getElementById('postMessage').addEventListener('click', function() {
	   uni.postMessage({
		 data: {
		   action: 'message'
		 }
	   });
	 });
   });
	import mixin from '@/util/mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				form_data:{
					city_id:"",
					county_id:"",
					role_id: "",
				},
				page:{
					is_bottom:false,
					page:1
				},
				scorllUi:{
					height:"",
					cri:false
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				goId:"",
				vote_num:5,
				is_vote_btn:"",
				list:[],
				dec:'',
				banner_image:"",
				is_up:""
			};
		},
		onLoad(options) {
			this.goId = options.id;
			this.scorllUi.height = 500 / 750 * window.innerWidth;
			this.getdec();
			this.render(null);
		},
		methods: {
			async getdec() {
				//console.log('运行');
				const res = await this.$httpPub({
					  url: 'activity/'+ this.goId,
					  method:'get',
					  data:{}
				})
			   this.dec = res;
			   this.banner_image = this.dec.banner_image;
			   this.is_up = this.dec.is_upload_btn;
			},
			envetTp(item){
				if(this.vote_num === 0) {
					this.toast("今日投票次数已用完");
					return;
				}
				//(item);
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '您今天还有'+ _this.vote_num +'次投票机会是否确定投票',
					success: async(res) => {
						if (res.confirm) {
							const res = await this.$http({
								url:"user/vote",
								method:'post',
								data:{
									id:item.id
								}
							})
							if(res.residue_num) {
								_this.vote_num = res.residue_num;
								item.total_vote ++;
								item.is_vote = true;
								_this.toast('投票成功')
							}
						} else if (res.cancel) {
							('用户点击取消');
						}
					}
				});
				// const res = await this.$http({
				// 	url:'user/vote',
				// 	medthod:'post',
				// 	id:id
				// })
				// console.log(id);
			},
			async render(res) {
				if(res) {
					this.list = [];
					this.form_data = res;
					this.page = {
						is_bottom:false,
						page:1
					}
				} 
				if(!this.page.is_bottom) {
					const _this = this;
					let postData = {
						page:this.page.page,
						page_count:8,
						...this.form_data
					}
					const res = await this.$http({
						  url:'article/' + _this.goId,
						  method:'get',
						  data:postData
					})
					// console.log(res);
					this.is_vote_btn = res.is_vote_btn;
					this.vote_num = res.vote_remainder_num;
					this.list.push(...res.data);
					// console.log(this.list);
					// console.log(this.list);
					if(res.current_page == res.last_page) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
				}
			},
			async collect(item) {
				console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  id:item.id
					  }
				})
				if(res) {
					item.collect_id = res.id;
					item.is_collect = 1;
					item.collect_total ++;
					this.toast('收藏成功')
				}
			},
			async uncollect(item) {
				console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  collect_id:item.collect_id
					  }
				})
				
				if(res) {
					item.collect_id = 0;
					item.is_collect = 0; 
					item.collect_total --;
					this.toast('取消收藏成功')
				}
				return false;
			},
			scrolltolower() {
				this.render(null);
			},
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop;
				// console.log(this.old.scrollTop);
				// console.log(this.old.scrollTop);
				// console.log(this.scorllUi);
				if(this.old.scrollTop > this.scorllUi.height) {
					this.scorllUi.cri = true;
				} else {
					this.scorllUi.cri = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	// .test {
	// 	width: 20rpx;
	// 	background-color: #f24545;
	// 	position: fixed;
	// 	height: 500rpx;
	// }
	.noneImg {
		width: 363rpx;
		height: 428rpx;
		margin: 125rpx auto 455rpx auto;
		display: block;
	}
   .page {
   		.add-form {
   			padding: 0;
   		}
   	}
   .block {
   	  width: 100%;
   	  padding: 0rpx 34rpx 40rpx;
   }
   .work-infoBox {
	       // padding-bottom: 0;
	   .work-inner {
		   background-color: #fff;
		   padding: 28rpx;
		   padding-bottom: 7rpx;
		   border-radius: $border-radius;
		   .img-title {
			   width: 281rpx;
			   height: 66rpx;
		   }
		   .work-cont {
			   font-size: 28rpx;
			   line-height: 1.6;
			   .p {
				   margin-bottom: 20rpx;
			   }
		   }
	   }
   }
   .work-works {
	     padding-top: 10rpx;
	  .work-works-inner {
		  background-color: #fff;
		  padding: 30rpx 20rpx;
		  border-radius: $border-radius;
	  }
	  .items {
	  	  display: flex;
	  	  justify-content: space-between;
	  	  flex-wrap: wrap;
		  padding-top: 26rpx;
	  	  .item {
	  		  width: 310rpx;
	  		  padding-bottom: 32rpx;
	  		  position: relative;
			  .colloct {
				  position: absolute;
				  right: 4px;
				  top:0;
				  min-width: 100rpx;
				  height: 100rpx;
				  color:#f24545;
				  @include center()
				  .iconfont {
					  font-size: 56rpx;
				  }

			  }
			  .tpBtn {
				  width: 100%;
				  height: 67rpx;
				  background-color: #f24545;
				  color: #fff;
				  margin-top: 20rpx;
				  border-radius: 8rpx;
				  font-size: 30rpx;
				  @include center();
				  &.disable{
					  background-color: #f5dede;
					  color:#fff;
				  }
			  }
	  		  .in-lab {
	  			  position: absolute;
	  			  right: 0;
	  			  top:0;
	  			  border-radius: 0 $border-radius 0 $border-radius !important;
	  			  padding: 8rpx 18rpx;
	  			  background-color: #f24545;
	  			  color:#fff;
	  			  font-size: 26rpx;
	  			  &.disable {
	  				  background-color: #e3cbcb;
	  				  color:#fff;
	  			  }
	  		  }
	  		  .imgBox {
	  		  		width: 100%;
	  				height: 232rpx;
	  				border-radius: $border-radius;
	  				overflow: hidden;
	  		  }
	  		  .in-title {
	  			  padding-top: 20rpx;
	  			  height: 100rpx;
	  			  font-size: 30rpx;
	  			  font-weight: 550;
	  			  @include textTwo();
	  		  }
	  		  .in-f-title {
	  			  padding-top: 18rpx;
	  			  font-size: 28rpx;
	  			   @include text();
	  		  }
	  		  .in-time {
	  			  padding-top: 18rpx;
	  			  font-size: 26rpx;
	  			  color:#cccccc;
	  		  }
	  	  }
	  }
   }
</style>
